
import { success ,Confirm,userConfirmed} from './Message.js';


let layerIndex;

/**
 * 显示新增信息弹出框
 */
export function  showEdit(type,data) {
    if(type==='add'){
        // 重置表单
        $("#addInfo").find('input, select').each(function () {
            $(this).val(''); // 清空输入框和选择框的值
        });
        layerIndex=layer.open(
            {
                type:1,
                title:"新增信息",
                area:['520px','auto'],
                content:$("#addInfo")
            }
        )
    }else{
        layerIndex=layer.open(
            {
                type:1,
                title:"修改信息",
                area:['520px','auto'],
                content: $("#addInfo"), // 直接传递 DOM 元素
                success: function (layero, index) {
                    // 获取表单元素
                    const form = layero.find('#addInfoForm')[0];

                    // 将初始数据应用到表单字段中
                    if (!data) {
                       return;
                    }
                    Object.keys(data).forEach(key => {
                        const element = form.querySelector(`[name="${key}"]`);
                        if (!element) {
                            return;
                        }
                        if (element.type === 'checkbox' || element.type === 'radio') {
                            element.checked = data[key];
                        } else if (element.tagName.toLowerCase() === 'select') {
                            element.value = data[key];
                        } else {
                            element.value = data[key];
                        }
                    });
                    // 弹出层成功打开后的其他操作
                    console.log('弹出层已打开');
                }
            }
        )
    }
}
// 关闭弹出层
function closeAddInfoDialog() {
    if (layerIndex !== undefined) {
        layer.close(layerIndex);
        layerIndex = undefined; // 重置索引值
    }
}

//初始化编辑信息
const loadEditInfo=(initialData)=>{
        // 获取表单元素
        const form = document.querySelector('#addInfo');

        // 将初始数据应用到表单字段中
        if (initialData) {
            Object.keys(initialData).forEach(key => {
                const element = form.querySelector(`[name="${key}"]`);
                if (element) {
                    if (element.type === 'checkbox' || element.type === 'radio') {
                        element.checked = initialData[key];
                    } else if (element.tagName.toLowerCase() === 'select') {
                        element.value = initialData[key];
                    } else {
                        element.value = initialData[key];
                    }
                }
            });
        }
        // 返回表单所在的容器
        return $('#addInfo')[0];

}

// 获取查询输入值
function  getSearchCondition() {
    let formData={};
    // 遍历输入元素，将值存储到formData中
    $("#queryForm").find('input',"select").each(function () {
        let name=$(this).attr('name'); // 获取元素的 name属性
        let value=$(this).val(); // 获取元素的值

        // 只有name 值存在且不为空 才会添加到formData中
        if(name&&value){
            formData[name]=value;
        }
    });
    return formData;
}

layui.use('form',function () {
    // 1.校验表单是否合法
    var form = layui.form;
    form.on('submit(submit)',function () {
        event.preventDefault();
        submitForm();
    })
    // 2. 表格初始化
    const table = layui.table;
    // 获取查询条件
    let queryData = getSearchCondition();

    //3 创建layui 的实例
    table.render({
        elem: '#teacher',
        url: '/api/teacher/getByPage',
        method:"post",
        contentType:'application/json',
        cellMinWidth: 100,
        totalRow: true, // 开启合计行
        where:{'data':queryData},
        page: true,
        cols: [[
            {type: 'checkbox', fixed: 'left'},
            {field: 'id', fixed: 'left', width: 80, title: 'ID', sort: true, },
            {field: 'name',  title: '姓名'},
            {field: 'sn',  title: '学工号'},
            {
                field: 'email',
                title: '邮箱 <i class="layui-icon layui-icon-tips layui-font-14" lay-event="email-tips" title="该字段开启了编辑功能" style="margin-left: 5px;"></i>',
                fieldTitle: '邮箱',
                hide: 0,
                width: 150,
                expandedMode: 'tips',
                edit: 'text'
            },
            {field: 'sex', title: '性别', sort: true,
                templet: d=> d.sex===1? '男':(d.sex===2?'未知':'未知')
            },
            {field: 'phone',  title: '电话', sort: true},

            {field: 'age',  title: '年龄', sort: true},

            {field: 'departmentSn', title: '部门编号', sort: true, },

            {fixed: 'right', title: '操作', width: 200, minWidth: 125, templet: '#editTemplate'}
        ]], done: function (res) { //执行成功后的函数
            // 删除结果
            console.log(res);
        }
    });

    // 点击编辑事件
    table.on('tool(teacher)',function (obj) {
        var  data=obj.data;
        if (obj.event ==='edit'){
            showEdit('edit',data);
        }
    })
});

// 搜索方法
export const search=()=>{
    // TODO 归零 pageIndex
    let queryData=getSearchCondition();
    const table=layui.table;
    table.reloadData("teacher",{
        where:{data:queryData}
    });
    console.log("where condition:"+JSON.stringify(queryData));
}

// 删除元素
export const  delData=()=>{
    layui.use(['layer' ], function() {
        let layer = layui.layer;
        layer.confirm("确定要删除吗", {icon: 3}, function(index){
            const table=layui.table;
            let checkStatus = table.checkStatus("teacher"); // teacher 表格id  或者filter id
            let ids = checkStatus.data.map(item=>item.id).join(",");

            let request = $.ajax({
                url: "/api/teacher/delDataBatch?ids="+ids,
                method: "POST",
            });

            request.done(function( msg ) {
                success();
                search();
                layer.close(index);
            });
            request.fail(function( jqXHR, textStatus ) {
                alert("操作失败")
            });
        }, function(index){
            layer.msg("取消成功", {icon: 1});
            layer.close(index);
        });
    });
}


export const submitForm=()=>{

    layui.use('form',function(){

        var form = layui.form;
        // 提交事件
        form.on('submit(submit)', function(data){
            var field = data.field; // 获取表单字段值
            var request = $.ajax({
                url: "/api/teacher/saveInfo",
                method: "POST",
                data: field,
                dataType: "json"
            });

            request.done(function( msg ) {
                success("新增成功");
                closeAddInfoDialog();
                search();
            });

            request.fail(function( jqXHR, textStatus ) {
                // alert( "Request failed: " + textStatus );
                alert("新增失败")
            });
            return false; // 阻止默认 form 跳转
        });
    });
}